<template>
  <div id="app">
    <div class="header-bg">
      <jd-header/>

      <jd-search/>
    </div>

    <jd-explain/>

    <jd-news-head/>

    <div class="new-fuli">
      <img class="fuli" src="./assets/images/c00dceee.png" alt="">
    </div>

    <jd-swiper/>

    <jd-discount/>

    <jd-shop-buying/>

    <jd-swiper2/>

    <jd-shops/>

    <jd-tab-bar/>
  </div>
</template>

<script>
  import JdHeader from './components/JdHeader.vue';
  import JdSearch from './components/JdSearch.vue';
  import JdExplain from './components/JdExplain.vue';
  import JdNewsHead from './components/JdNewsHead.vue';
  import JdSwiper from './components/JdSwiper.vue';
  import JdDiscount from './components/JdDiscount.vue';
  import JdSwiper2 from './components/JdSwiper2.vue';
  import JdShops from './components/JdShops.vue';
  import JdShopBuying from './components/JdShopBuying.vue';
  import JdTabBar from './components/JdTabBar.vue';

export default {
  name: 'App',
  components: {
    JdHeader,
    JdSearch,
    JdExplain,
    JdNewsHead,
    JdSwiper,
    JdDiscount,
    JdSwiper2,
    JdShops,
    JdShopBuying,
    JdTabBar
  },
};
</script>

<style lang="scss" scoped>
#app {
  padding: 133px 0 151px;
  background-color: #eee;
  .header-bg{

    background: url("./assets/images/490c8d7fcb8bbb0b.jpg") no-repeat 0 0;
    -webkit-background-size: 100%;
    background-size: 100% 100%;
    overflow: hidden;
  }
  .new-fuli{
    padding: 0 30px;
    img{
      width: 100%;
    }
  }
}
</style>
